// components/MultiModalTextArea.tsx
import { Textarea } from "@/components/ui/textarea";
import { useEffect, useRef, useState } from "react";
import { Input } from "./ui/input";
import { Upload, Send, Paperclip } from "lucide-react";
import { Button } from "./ui/button";

interface MultiModalTextAreaProps {
  value: string;
  status: string;
  onChange: (value: string) => void;
  onKeyDown?: (event: KeyboardEvent) => void;
  onFileChange?: (files: FileList) => void;
  handleSubmit?: () => void;
}

const MultiModalTextArea: React.FC<MultiModalTextAreaProps> = ({ value, status, onChange, onKeyDown, onFileChange, handleSubmit }) => {
  const [files, setFiles] = useState<File[]>([]);
  const inputFileRef = useRef(null);
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newFiles = Array.from(event.target.files || []);
    setFiles((prevFiles) => [...prevFiles, ...newFiles]);
    if(onFileChange){
    //   onFileChange(event.target.files)
    }
    if(onFileChange && event.target.files) {
        onFileChange(event.target.files);
    }
  };

  const clearFileInput = () => {
    inputFileRef.current!.value = '';
  };

  const handleKeyDown = (event: KeyboardEvent) => {
    
    if (event.key === 'Enter'){ 
      event.preventDefault(); // 阻止默认的换行行为
      if(handleSubmit) {
        handleSubmit();
      }
    }
  }
  useEffect(() => {
    document.body.addEventListener('keydown', handleKeyDown);
    return () => {
      document.body.removeEventListener('keydown', handleKeyDown);
    };
  }, []);
  return (
    <div className="relative w-full flex flex-col gap-4">
      <Textarea
        rows={3}
    
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => handleKeyDown(e as unknown as KeyboardEvent)}
        placeholder="Type your message here..."
        className="mb-4min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-2xl !text-base bg-muted pb-10 dark:border-zinc-700"
      />
       <div className="absolute bottom-0 p-2 gap-2 w-fit flex flex-row justify-end w-full">
          <Button className="" disabled={status !== 'ready'} onClick={() => inputFileRef.current?.click()}>
              <Input type="file" onChange={handleFileChange} className="hidden" ref={inputFileRef}></Input>
              <Upload size={16} />
          </Button>
          <Button onClick={() => {
              if(handleSubmit) {
                  handleSubmit()
              }
              }} disabled={status !== 'ready'}>
              
              <Send size={16} />
          </Button>
      </div>
      {/* <div className="flex justify-between ">
        <div className="flex gap-2">
            {files.map((file, index) => (
            <div key={index}>{file.name}</div>
            ))}
        </div>
      </div> */}
    </div>
  );
};

export default MultiModalTextArea;
